<template>
   <div id="myCahrt" ref="myCahrt" class="my-chart">

   </div>
</template>
<script type="text/babel">
  let echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/pie');
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/toolbox');
  require('echarts/lib/component/legend');
  require('echarts/lib/component/markLine');
  import resize from './mixins/resize'

  export default{
    name:'Chart',
    mixins: [resize],
    props:['myCahrt'],
    data(){
       return {
         chart:null
       }
    },
    mounted () {
      // this.setEchart();
      this.$emit('test', echarts.init(this.$refs.myCahrt));
    },
    methods: {
      setEchart () {
        this.chart = echarts.init(this.$refs.myCahrt);
        this.chart.setOption({
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: this.mydata.mydata
          },
          series : [
            {
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              color:this.color,
              data:this.values,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
      }
    }
  }

</script>
<style>
  #myCahrt{
    height: 300px;
  }
</style>
